<template>
	<view class="page_wrapper page_bg">
		<Navbar title="口算出题" />
		<view class="pagebox">
			<view class="page_title">
				请根据需要配置生成参数：
			</view>
			<view class="conditions_block">
				<view class="conditions_wrapper">
					<view class="row_block">
						<view class="con_title">计算数1 范围:</view>
						<view class="row_val">
							<CustomSlider :typeNum="'thousand'" :min="100" :max="1000" :value="examForm.firstNum"
								style="width: 100%;" :btnInit="btnInit.firstNum" @checkedValue="updateValueFirst"
								@updateValue="updateFirst">
							</CustomSlider>
						</view>
						<view style="width: 60rpx;">{{examForm.firstNum}}</view>
					</view>
					<view class="row_block">
						<view class="con_title">计算数2 范围:</view>
						<view class="row_val">
							<CustomSlider :typeNum="'thousand'" :min="100" :max="1000" :value="examForm.secondNum"
								style="width: 100%;" :btnInit="btnInit.secondNum" @checkedValue="updateValueSecond"
								@updateValue="updateSecond">
							</CustomSlider>
						</view>
						<view style="width: 60rpx;">{{examForm.secondNum}}</view>
					</view>
					<view class="row_block">
						<view class="con_title">结果值 范围:</view>
						<view class="row_val">
							<CustomSlider :typeNum="'thousand'" :min="100" :max="1000" :value="examForm.resultNum"
								style="width: 100%;" :btnInit="btnInit.resultNum" @checkedValue="updateValueResult"
								@updateValue="updateResult">
							</CustomSlider>
						</view>
						<view style="width: 60rpx;">{{examForm.resultNum}}</view>
					</view>
					<view class="row_block">
						<view class="con_title">生成试题数量:</view>
						<view class="row_val">
							<CustomSlider :value="examForm.calcTotalCount" style="width: 100%;" :min="10" :max="60"
								:btnInit="btnInit.calcTotalCount" @checkedValue="updateValueCount"
								@updateValue="updateCount"></CustomSlider>
						</view>
						<view style="width: 60rpx;">{{examForm.calcTotalCount}}</view>
					</view>
					<view class="calctypebox">
						<view>计算类型:</view>
						<view class="row_val">
							<view class="calc_types">
								<view class="calcType_item" v-for="(calcType, index) in calcTypes" :key="calcType.name">
									<u-tag v-if="calcType.checked" bgColor="#2E996C" color="#ffffff" shape="circle"
										@click="calcTypeChange(index)">{{calcType.title}}</u-tag>
									<u-tag v-else bgColor="#D4F5D2" shape="circle" color="#50974B"
										@click="calcTypeChange(index)">{{calcType.title}}</u-tag>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="set_btns_block" style="margin-top: 20px;">
					<view class="block_title">常用配置参数:</view>
					<view class="set_btns_box">
						<view v-for="(con, index) in setList" :key="index" class="condition_block">
							<u-tag @click="changeCondition(con)" shape="circle" bgColor="#D4F5D2"
								color="#50974B">{{con.name}}</u-tag>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom_btns_block">
				<view type="primary" plain class="preview_btn" @click="previewExam">生成试题</view>
			</view>
		</view>

		<image class="page_bg_img" src="../../static/nimg/bg.png" mode=""></image>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	import {
		storageData
	} from '@/utils/storageData.js'
	import {
		createPad
	} from '../../utils/create.js'
	import CustomSlider from "@/components/customSlider.vue"
	import Navbar from '@/components/navbar.vue'
	export default {
		components: {
			CustomSlider,
			Navbar
		},
		data() {
			return {
				loading: false,
				maxNum: 1000,
				minNum: 100,
				stepCount: 100,
				btnInit: {},
				examForm: {
					firstNum: 500,
					secondNum: 500,
					resultNum: 1000,
					calcTotalCount: 40,
					selectCalcTypes: ['+'],
					difficultTypes: []
				},
				calcTypes: [{
						name: '+',
						title: "加法",
						checked: true
					},
					{
						name: '-',
						title: "减法",
						checked: false
					},
				],
				difficultTypes: [{
						name: '计算值不为0',
						checked: false
					},
					{
						name: '计算值不为1',
						checked: false
					},
					{
						name: '得数不为0',
						checked: false
					},
					{
						name: '得数不为1',
						checked: false
					}
				],
				mathExamId: 0,
				mathCalcList: [],
				setList: [{
						"name": "200以内加减法20道",
						"firstNum": 200,
						"secondNum": 200,
						"resultNum": 200,
						"calcTotalCount": 20,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": []
					},
					{
						"name": "500以内加减法20道",
						"firstNum": 500,
						"secondNum": 500,
						"resultNum": 500,
						"calcTotalCount": 20,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": []
					},
					{
						"name": "1000以内加减法20道",
						"firstNum": 1000,
						"secondNum": 1000,
						"resultNum": 1000,
						"calcTotalCount": 20,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": []
					},
					{
						"name": "200以内加减法40道",
						"firstNum": 200,
						"secondNum": 200,
						"resultNum": 200,
						"calcTotalCount": 40,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": []
					},
					{
						"name": "500以内加减法40道",
						"firstNum": 500,
						"secondNum": 500,
						"resultNum": 500,
						"calcTotalCount": 40,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": []
					},
					{
						"name": "1000以内加减法40道",
						"firstNum": 1000,
						"secondNum": 1000,
						"resultNum": 1000,
						"calcTotalCount": 40,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": []
					},
				],
				setData: {
					title: '',
					// examForm里的属性
				}
			}
		},
		onLoad(option) {
			// this.fetchSetList()
			this.btnInit = Object.assign({}, this.examForm)
		},
		methods: {
			fetchSetList() {
				const wechatOpenId = getApp().globalData.wechatOpenId
			},
			updateValueFirst(e) {
				this.examForm.firstNum = e || e.detail.value
			},
			updateFirst(e) {
				this.examForm.firstNum = e || e.detail.value
			},
			updateValueSecond(e) {
				this.examForm.secondNum = e || e.detail.value
			},
			updateSecond(e) {
				this.examForm.secondNum = e || e.detail.value
			},
			updateValueResult(e) {
				this.examForm.resultNum = e || e.detail.value
			},
			updateResult(e) {
				this.examForm.resultNum = e || e.detail.value
			},
			updateValueCount(e) {
				this.examForm.calcTotalCount = e || e.detail.value
			},
			updateCount(e) {
				this.examForm.calcTotalCount = e || e.detail.value
			},
			previewExam() {
				console.log(this.examForm)

				this.loading = true
				const data = JSON.parse(JSON.stringify(this.examForm))
				data.selectCalcTypes = []
				this.calcTypes.forEach(item => {
					if (item.checked) {
						data.selectCalcTypes.push(item.name)
					}
				})
				data.difficultTypes = []
				this.difficultTypes.forEach(item => {
					if (item.checked) {
						data.difficultTypes.push(item.name)
					}
				})
				console.log(data)
				uni.showLoading()
				let arr = createPad(data)
				uni.setStorageSync('test_id', JSON.stringify(arr))
				uni.hideLoading()
				uni.navigateTo({
					url: '/pages/mathCalcs/mathCalcs?examId=test_id'+'&ten=2'
				})
			},
			calcTypeChange(index) {
				this.calcTypes[index].checked = !this.calcTypes[index].checked
			},
			changeCondition(con) {

				this.examForm = JSON.parse(JSON.stringify(con))
				this.btnInit = Object.assign({}, this.examForm)
				// 计算类型
				for (let i = 0; i < this.calcTypes.length; i++) {
					this.$set(this.calcTypes[i], 'checked', this.examForm.selectCalcTypes.indexOf(this.calcTypes[i]
						.name) >= 0 ? true : false)
				}
				this.$forceUpdate()
			},
			saveSet() {
				const $this = this
				uni.showModal({
					title: '请给当前设置起个名字吧:',
					editable: true,
					success: function(res) {
						if (res.confirm) {
							const title = res.content
							const valMap = JSON.parse(JSON.stringify($this.examForm))
							valMap.title = title
							$this.setList.push(valMap)

							const wechatOpenId = getApp().globalData.wechatOpenId
							uni.showLoading()
						}
					}
				})
			},
			showMySetList() {
				const titleList = this.setList.map(obj => obj.title)
				if (titleList.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无常用设置'
					})
					return false
				}
				const $this = this
				uni.showActionSheet({
					itemList: titleList,
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						$this.examForm = $this.setList[parseInt(res.tapIndex + '')]

						// 计算类型
						$this.calcTypes.forEach((type) => {
							type.checked = false
						})
						$this.examForm.selectCalcTypes.forEach((item) => {
							$this.calcTypes.forEach((type) => {
								if (item === type.name) {
									type.checked = true
								}
							})
						})

						// 计算难度
						$this.difficultTypes.forEach((type) => {
							type.checked = false
						})
						$this.examForm.difficultTypes.forEach((item) => {
							$this.difficultTypes.forEach((type) => {
								if (item === type.name) {
									type.checked = true
								}
							})
						})

					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-tag {
		border-color: rgba(0, 0, 0, 0) !important;
		justify-content: center;
		height: 65rpx !important;
	}

	.page_wrapper {
		.pagebox {
			padding: 0 40rpx;
			position: relative;
			z-index: 4;
			top: 160rpx;
		}

		.page_title {
			font-size: 17px;
			font-weight: 500;
			height: 60px;
			display: flex;
			align-items: center;
			margin-left: 20px;
			margin-right: 20px;
		}

		.conditions_block {
			flex: 1;
			overflow-y: scroll;
			// margin-left: 15px;
			// margin-right: 15px;

			.conditions_wrapper {
				padding-top: 10px;
				padding-bottom: 10px;
				border-radius: 8px;
				background: #C4E6C2;
				color: #074F1E;
				font-size: 28rpx;
				font-weight: 400;
			}

			.calctypebox {
				padding: 0 30rpx;
				display: flex;
				flex-direction: column;
				row-gap: 20rpx;
				margin-bottom: 20rpx;
			}

			.row_val {
				// flex: 1;
				display: flex;

				.slider_val {
					width: 100%;
				}

				.calc_types {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					justify-content: space-between;
					gap: 20rpx;

					.calcType_item {
						width: 140rpx;
						height: 65rpx;
					}

					.difficultType {
						width: 290rpx;
						height: 65rpx;
					}
				}
			}

			.row_block {
				display: flex;
				justify-content: space-around;
				align-items: center;
				// padding-right: 50rpx;
				padding-left: 10rpx;

				.con_title {
					width: 100px;
					text-align: justify-all;
					text-align-last: justify;
					display: inline-block;
					// display: flex;
					justify-content: flex-end;
					align-items: center;
				}


			}

			.set_btns_block {
				display: flex;
				flex-direction: column;

				.block_title {
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 20px;
					padding-bottom: 15px;
					color: #074F1E;
				}

				.set_btns_box {
					background-color: #C4E6C2;
					border-radius: 20rpx;
					padding: 40rpx 20rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					gap: 20rpx;
				}

				.condition_block {
					width: 290rpx;
					height: 65rpx;
					border-radius: 6px;
				}

				.condition_block:active {
					// background-color: orange;
				}
			}
		}

		.bottom_btns_block {
			.preview_btn {
				width: 100%;
				height: 98rpx;
				color: white;
				background-color: #2E996C;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
			}
		}
	}
</style>